import {
    useState,
    useEffect
} from 'react'

export const useTodos = () => {
    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem("todos")) || [])
    useEffect(() => {
        // 接受字符串
        localStorage.setItem("todos", JSON.stringify(todos))
    }, [todos])

    // 新增todo
    const addTodo = (text) => {
        // 数据状态是对象的时候
        setTodos([...todos,
        {
            id: Date.now(),
            text,
            isComplete: false
        }
        ])
    }
    // 勾选 
    const onToggle = (id) => {
        // todos 数组找到id 为id的todo，将isComplete 取反
        // 响应式？ 返回一个全新的todos map
        setTodos(todos.map(
            todo => todo.id === id ? { ...todo, isComplete: !todo.isComplete } : todo
        ))
    }
    // 删除
    const onDelete = (id) => {
        setTodos(todos.filter(todo => todo.id !== id)) // 过滤器
    }

    return {
        todos,
        setTodos,
        addTodo,
        onToggle,
        onDelete
    }
}